<template>
  <el-row class="py-20">
    <el-col>
      <el-row type="flex" justify="end" :gutter="0">
        <el-button plain type="primary" @click="addHandler">添加新客户</el-button>

        <el-button plain type="danger" @click="isShowUploadModal = true">导入</el-button>
        <el-button plain type="info" @click="downLoadHandler2">导出</el-button>
        <el-button plain type="success" @click="downLoadHandler">下载模板</el-button>
        <el-button plain type="primary" @click="drawer = true">筛选</el-button>
        <el-button plain type="success" @click="resetFormHandler">重置</el-button>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-drawer
            :before-close="cancelForm"
            title="筛选"
            ref="drawer"
            :visible.sync="drawer"
            :with-header="true"
            :modal="false"
            :size="500"
          >
            <el-row>
              <el-col>
                <!-- 抽屉效果 -->
                <div class="demo-drawer__content">
                  <el-form :model="filterInfo">
                    <el-form-item label="客户姓名" label-width="100px">
                      <el-input v-model.trim="filterInfo.name" style="width: 200px" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="电话号码" label-width="100px">
                      <el-input v-model.number="filterInfo.phone" style="width: 200px" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="客户地址" label-width="100px">
                      <el-input v-model.trim="filterInfo.address" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="创建时间" label-width="100px">
                      <el-date-picker
                        v-model="filterInfo.craeteTime"
                        format="yyyy 年 MM 月 dd 日"
                        value-format="yyyy-MM-dd"
                        type="date"
                        placeholder="选择日期"
                      >
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item label="客户状态" label-width="100px">
                      <el-radio-group v-model="filterInfo.state">
                        <el-radio label="1">正常</el-radio>
                        <el-radio label="0">注销</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="" label-width="100px">
                      <el-button @click="cancelForm">取 消</el-button>
                      <el-button type="primary" @click="searchCustome">查询</el-button>
                    </el-form-item>
                  </el-form>
                </div>
              </el-col>
            </el-row>
          </el-drawer>
        </el-col>
      </el-row>
    </el-col>
    <el-dialog title="选择要导入的水表数据文件" :visible.sync="isShowUploadModal" width="30%">
      <el-upload action="/" :auto-upload="false" :on-change="changeFileHandler" :file-list="fileList">
        <el-button size="small" type="primary">选择文件</el-button>
        <div slot="tip" class="el-upload__tip">只能上传一个xls/xlss文件</div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="escUploadHandler">取 消</el-button>
        <el-button type="primary" @click="uploadFileHandler">确 定</el-button>
      </span>
    </el-dialog>
  </el-row>
</template>

<script>
import { downloadCustomerExcel, downloadCustomerModel, uploadCustomerExecl, getCustomer } from '@/config/api.js'
export default {
  data() {
    return {
      loading: false,
      // searchValue: '',
      drawer: false,
      filterInfo: {
        name: '',
        phone: '',
        address: '',
        craeteTime: '',
        state: null
      },
      // 筛选
      // filterInfoForm: {
      //   name: [
      //     { message: '请输入客户名称', trigger: 'blur' },
      //     { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
      //   ],
      //   phone: [
      //     { message: '请输入手机号码', trigger: 'blur' },
      //     {
      //       pattern: /^1[3456789]\d{9}$/,
      //       message: '请输入11位数字',
      //       trigger: 'blur'
      //     }
      //   ]
      // },
      uploadFile: '', // 导入的文件
      isShowUploadModal: false, // 导入水表modal
      fileList: [] // 文件列表
    }
  },
  methods: {
    addHandler() {
      this.$router.push('/home/addcustomer')
    },
    // $refs.drawer.closeDrawer()
    searchCustome() {
      getCustomer({ ...this.filterInfo, pageNum: 1, pageSize: 5 }).then(res => {
        console.log(res)
        if (res.code === 200) {
          this.$emit('search-custome', { data: res.data, info: this.filterInfo })
          this.$refs.drawer.closeDrawer()
        }
      })
    },
    // 下载客户数据
    downLoadHandler2() {
      downloadCustomerExcel().then(res => {
        const link = document.createElement('a')
        const blob = new Blob([res], { type: 'application/vnd.ms-excel;charset=utf-8' })
        link.href = URL.createObjectURL(blob)
        link.download = '客户数据表.xlsx'
        link.click()
        link.remove()
      })
    },
    // 下载模板
    downLoadHandler() {
      downloadCustomerModel().then(res => {
        const link = document.createElement('a')
        const blob = new Blob([res], { type: 'application/vnd.ms-excel;charset=utf-8' })
        link.href = URL.createObjectURL(blob)
        link.download = '客户模板文件.xlsx'
        link.click()
        link.remove()
      })
    },
    // 选择文件时的函数
    changeFileHandler(file, fileList) {
      // console.log(fileList)
      const isExecl =
        file.raw.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
        file.raw.type === 'application/vnd.ms-excel'

      if (!isExecl) {
        this.$message.error('上传文件只能是 xls, xlsx 格式!')
        this.fileList = []
      } else {
        this.uploadFile = file.raw
        fileList.length === 2 && (this.fileList = [fileList[1]])
      }
      // console.log(this.uploadFile)
    },
    // 确定上传导入的文件的函数
    uploadFileHandler() {
      let myfromData = new FormData()
      myfromData.append('file', this.uploadFile)
      uploadCustomerExecl(myfromData).then(res => {
        console.log(res)
        if (res.code === 200) {
          this.$message({
            message: '导入成功'
          })
          this.isShowUploadModal = false
          this.fileList = []
          this.uploadFile = ''
          this.getWaterMeterQueryPage() //重新获取最新数据
        }
      })
    },
    // 取消上传时的函数
    escUploadHandler() {
      this.isShowUploadModal = false
      this.fileList = []
      this.uploadFile = ''
    },
    cancelForm() {
      this.drawer = false
      this.filterInfo = {
        name: '',
        phone: '',
        address: '',
        craeteTime: '',
        state: null
      }
    },
    resetFormHandler() {
      this.filterInfo = {
        name: '',
        phone: '',
        address: '',
        craeteTime: '',
        state: null
      }
      this.$emit('page-reset')
    }
  }
}
</script>

<style></style>
